<template>
  <div>
    <div  @click="drawPolygon"  class="flex-dc" >
      <i class="el-icon-zoom-in"></i>
      <span>开始绘制</span>
    </div>
    <div
      class="flex-dc"
      @click="editLayer"
    >
      <i class="el-icon-edit-outline"></i>
      <span>{{ isEditing ? "完成" : "" }}编辑</span>
    </div>
    <div
      class="flex-dc"  @click="revokeDraw" >
      <i class="el-icon-refresh-left"></i>
      <span>撤销</span>
    </div>
    <div class="flex-dc" @click="delDraw">
      <i class="el-icon-delete"></i>
      <span>{{ isDeling ? "完成" : "" }}删除</span>
    </div>
    <div class="flex-dc" @click="escEdit">
      <i class="el-icon-s-unfold"></i>
      <span>退出</span>
    </div>
  </div>
</template>
<script>
import olDrawTool from "./olDrawTool";
export default {
  props: {
    map: {
      type: Object,
    }
  },
  data() {
    return {
      isEditing: false, //是否编辑状态
      isDeling: false, //是否删除状态
      isDrawing: true,
      DrawTool: null, //绘制工具实例
      drawLayers: [],
    }
  },
  methods: {
    // 绘制矢量图层
    drawPolygon() {
      if (!this.DrawTool) {
        this.DrawTool = new olDrawTool(this.map);
      }
      this.DrawTool.startDraw((drawLayers) => {
        //绘制完成回调函数，根据业务决定是否需要
        this.drawLayers = drawLayers;
      });
    },
    // 撤销绘制
    revokeDraw() {
      console.log(">>>>>>>>> revokeDraw");
      this.DrawTool.revokeDraw();
    },
    // 删除矢量图层
    delDraw() {
      this.isDeling = !this.isDeling;
      if (this.isDeling) {
        this.isDrawing = false;
        this.DrawTool.delDraw((layer, drawLayers) => {
          console.log(drawLayers, layer, "=======删除！");
        });
      } else {
        this.isDrawing = true;
        this.DrawTool.delDrawEnd();
      }
    },
    // 编辑矢量图层
    editLayer() {
      this.isEditing = !this.isEditing;
      if (this.isEditing) {
        this.isDrawing = false;
        this.DrawTool.editLayer();
      } else {
        this.isDrawing = true;
        this.DrawTool.editLayerEnd();
      }
    },
    // 退出
    escEdit() {
      this.DrawTool.clear();
      this.isEditing = false;
      this.isDeling = false;
      this.isDrawing = true;
      this.DrawTool = null;
    },
  }
}
</script>
